<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../icons/element-icons.woff">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/normal.css">
    <link rel="stylesheet" href="../css/order.css">
    <script type="module" src="../js/orderDetile.js"></script>
</head>

<body>
    <div id="app">
        <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
            <div class="sidebar-container" :span="4">
                <el-scrollbar max-height="1080px">
                    <el-menu mode="vertical" :show-timeout="100" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                        background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
                        <el-menu-item index="0">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                          </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                              <i class="el-icon-s-goods"></i>
                              <span>商品</span>
                            </template>
                              <el-menu-item index="1-1">商品列表</el-menu-item>
                              <el-menu-item index="1-2">添加商品</el-menu-item>
                              <el-submenu index="1-3"><span slot="title">商品分类</span>
<!--                                <el-menu-item index="1-3-1">猫</el-menu-item>-->
<!--                                <el-menu-item index="1-3-2">狗</el-menu-item>-->
<!--                                <el-menu-item index="1-3-3">鱼</el-menu-item>-->
<!--                                <el-menu-item index="1-3-4">鸟</el-menu-item>-->
<!--                                <el-menu-item index="1-3-5">爬行类</el-menu-item>-->
                                <a href="viewProductAttr?categoryId=CATS"> <el-menu-item index="1-3-1">猫</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=DOGS"><el-menu-item index="1-3-2">狗</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=FISH"><el-menu-item index="1-3-3">鱼</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=BIRDS"><el-menu-item index="1-3-4">鸟</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=REPTILES"><el-menu-item index="1-3-5">爬行类</el-menu-item></a>
                              </el-submenu>
                          </el-submenu>
                          <el-menu-item index="2">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单</span>
                          </el-menu-item>
                          <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">待开发</span>
                          </el-menu-item>
                          <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理</span>
                          </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container" :span="20">
                  <el-menu class="navbar" mode="horizontal">
                    <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
                        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                          <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                            p-id="1692"></path>
                          <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                            p-id="1693"></path>
                          <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                            p-id="1694"></path>
                        </svg>
                      </div>
                    <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                      <div class="avatar-wrapper">
                        <img class="user-avatar" >
                        <i class="el-icon-caret-bottom"></i>
                      </div>
                      <el-dropdown-menu class="user-dropdown" slot="dropdown">
                        <a class="inlineBlock" to="/">
                          <el-dropdown-item command="home">
                            首页
                          </el-dropdown-item>
                        </a>
                        <el-dropdown-item divided>
                          <span @click="logout" style="display:block;">退出</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-menu>
                  <div class="detail-container">
                    <div>
                      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
                        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
                        <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
                        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
                        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
                        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
                      </el-steps>
                    </div>
                    <el-card shadow="never" style="margin-top: 15px">
                      <div class="operate-container">
                        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                        <span class="color-danger">当前订单状态：{{order.status | formatStatus}}</span>
                        <div class="operate-button-container" v-show="order.status===0">
                          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
                          <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
                          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
                        </div>
                        <div class="operate-button-container" v-show="order.status===1">
                          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
                          <el-button size="mini">取消订单</el-button>
                        </div>
                        <div class="operate-button-container" v-show="order.status===2||order.status===3">
                          <el-button size="mini" @click="error">订单跟踪</el-button>
                        </div>
                        <div class="operate-button-container" v-show="order.status===4">
                          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
                        </div>
                      </div>
                      <div style="margin-top: 20px">
                        <i class="el-icon-s-promotion" style="color: #606266"></i>
                        <span class="font-small">基本信息</span>
                      </div>
                      <div class="table-layout">
                        <el-row>
                          <el-col :span="12" class="table-cell-title">订单编号</el-col>
                          <el-col :span="12" class="table-cell-title">用户账号</el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12" class="table-cell">{{order.orderSn}}</el-col>
                          <el-col :span="12" class="table-cell">{{order.memberUsername}}</el-col>
                        </el-row>
                      </div>
                      <div style="margin-top: 20px">
                        <i class="el-icon-s-promotion" style="color: #606266"></i>
                        <span class="font-small">收货人信息</span>
                      </div>
                      <div class="table-layout">
                        <el-row>
                          <el-col :span="6" class="table-cell-title">收货人</el-col>
                          <el-col :span="6" class="table-cell-title">手机号码</el-col>
                          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
                          <el-col :span="6" class="table-cell-title">收货地址</el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="6" class="table-cell">{{order.receiverName}}</el-col>
                          <el-col :span="6" class="table-cell">{{order.receiverPhone}}</el-col>
                          <el-col :span="6" class="table-cell">{{order.receiverPostCode}}</el-col>
                          <el-col :span="6" class="table-cell">{{order | formatAddress}}</el-col>
                        </el-row>
                      </div>
                      <div style="margin-top: 20px">
                        <i class="el-icon-s-promotion" style="color: #606266"></i>
                        <span class="font-small">商品信息</span>
                      </div>
                      <el-table
                        ref="orderItemTable"
                        :data="order.orderItemList"
                        style="width: 100%;margin-top: 20px" border>
                        <el-table-column label="商品图片" width="120" align="center">
                          <template slot-scope="scope">
                            <img :src="scope.row.pic" style="height: 80px">
                          </template>
                        </el-table-column>
                        <el-table-column label="商品名称" align="center">
                          <template slot-scope="scope">
                            <p>{{scope.row.productName}}</p>
                          </template>
                        </el-table-column>
                        <el-table-column label="价格" width="120" align="center">
                          <template slot-scope="scope">
                            <p>价格：￥{{scope.row.productPrice}}</p>
                          </template>
                        </el-table-column>
                        <el-table-column label="数量" width="120" align="center">
                          <template slot-scope="scope">
                            {{scope.row.productQuantity}}
                          </template>
                        </el-table-column>
                      </el-table>
                      <div style="float: right;margin: 20px">
                        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
                      </div>
                      <div style="margin-top: 60px">
                        <i class="el-icon-s-promotion" style="color: #606266"></i>
                        <span class="font-small">费用信息</span>
                      </div>
                      <div class="table-layout">
                        <el-row>
                          <el-col :span="6" class="table-cell-title">商品合计</el-col>
                          <el-col :span="6" class="table-cell-title">运费</el-col>
                          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
                          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
                          <el-col :span="6" class="table-cell">￥{{order.freightAmount}}</el-col>
                          <el-col :span="6" class="table-cell">
                            <span class="color-danger">￥{{order.totalAmount+order.freightAmount}}</span>
                          </el-col>
                          <el-col :span="6" class="table-cell">
                            <span class="color-danger">￥{{order.payAmount+order.freightAmount}}</span>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                    <el-dialog title="修改收货人信息"
                               :visible.sync="receiverDialogVisible"
                               width="40%">
                      <el-form :model="receiverInfo"
                               ref="receiverInfoForm"
                               label-width="150px">
                        <el-form-item label="收货人姓名：">
                          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码：">
                          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码：">
                          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="所在区域：">
                          <v-distpicker :province="receiverInfo.receiverProvince"
                                        :city="receiverInfo.receiverCity"
                                        :area="receiverInfo.receiverRegion"
                                        @selected="onSelectRegion"></v-distpicker>
                        </el-form-item>
                        <el-form-item label="详细地址：">
                          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
                          </el-input>
                        </el-form-item>
                      </el-form>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="receiverDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
                      </span>
                    </el-dialog>
                  </div>
            </div>
        </div>
    </div>
</body>
</html>